<template>
	<view class="myform">
		<uni-nav-bar shadow left-icon="left" @clickLeft="back" />
		<view class="my-drawer" id="drawer" @tap.self="notswitchDiv()" v-for="(item,index) in list" :key="index">
			<view class="box" id="box">
				<view class="box-text" @tap.self="notswitchDiv()">关闭</view>
				<view class="box-imgbox">
					<view class="imgbox-img" v-for="(item,index) in imglist" :key="item.id">
						<image @tap="notswitchimg(item.img)" :src="item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<view class="myform-box" v-for="(item,index) in list" :key="item.id">
			<view class="myform-img" @tap="switchDiv()">
				<image :src="userimg" mode=""></image>
			</view>
			<uni-section title="个人信息" type="line">
				<view class="example">
					<!-- 基础表单校验 -->
					<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">

						<uni-forms-item name="phone" label="联系方式" labelWidth="70px">
							<uni-easyinput type="text" v-model="valiFormData.phone" :placeholder="item.phone" />
						</uni-forms-item>

						<uni-forms-item label="性别" name="name" labelWidth="80px">
							<view class="mytest">
								<text>{{sex}}</text>
							</view>
						</uni-forms-item>
						<view class="" v-if="role == 'student'">
							<uni-forms-item label="学号" name="stunumber" labelWidth="80px">
								<view class="mytest">
									<text>{{item.stunumber}}</text>
								</view>
							</uni-forms-item>
							<uni-forms-item label="姓名" name="name" labelWidth="80px">
								<view class="mytest">
									<text>{{item.xsname}}</text>
								</view>
							</uni-forms-item>
							<uni-forms-item label="入学时间" name="time" labelWidth="80px">
								<view class="mytest">
									<text>{{item.admtime}}</text>
								</view>
							</uni-forms-item>
						</view>
					</uni-forms>
					<button type="primary" @tap="submit('valiForm')">提交保存</button>
				</view>

			</uni-section>
		</view>
	</view>
</template>

<script>
	import store from "@/store/index.js"
	import axios from "axios"
	export default {
		data() {
			return {
				userimg: '/static/img/1.svg',
				sex: '',
				role:'',
				list: [],
				valiFormData: {
					phone: ''
				},
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入11位手机号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let phone = /^\d{11}$/
								if (!phone.test(value)) {
									callback('请输入11位手机号，请重新填写')
								}
								return true
							}
						}]
					},
				},
				imglist: [{
						id: 1,
						img: "/static/img/1.svg",
					},
					{
						id: 2,
						img: "/static/img/2.svg",
					},
					{
						id: 3,
						img: "/static/img/3.svg",
					},
					{
						id: 4,
						img: "/static/img/4.svg",
					},
					{
						id: 5,
						img: "/static/img/5.svg",
					},
					{
						id: 6,
						img: "/static/img/6.svg",
					},
					{
						id: 7,
						img: "/static/img/7.svg",
					},
				]
			}
		},
		computed: {

		},
		mounted() {
			this.valiFormData.phone = uni.getStorageSync('userlist')[0].phone
			this.userimg = uni.getStorageSync('userlist')[0].img
			this.sex = uni.getStorageSync('userlist')[0].sex
			this.role = uni.getStorageSync('userlist')[0].role
			console.log(this.role);
			const username = uni.getStorageSync('userlist')[0].username
			axios.get('/api/stumsg?username='+username)
			.then(res =>{
				console.log(res.data);
				this.list = res.data
			})
		},
		methods: {
			submit(ref) {
				this.$refs[ref][0].validate()
					.then(res => {
						const id = uni.getStorageSync('userlist')[0].id
						const phone = this.valiFormData.phone
						const img = this.userimg
						axios.post('/api/updatamyfrom?id=' + id 
						+ '&phone=' + phone
						+ '&img=' + img)
						.then(res => {
							uni.showToast({
								title: '提交成功',
								mask: true,
								icon: "success"
							})
						}).then(res =>{
							setTimeout(()=>{
								this.$router.go(0)
							},500)
							this.back()
						})
						.catch(res => {
							uni.showToast({
								title: '提交失败',
								mask: true,
								icon: "error"
							})
						})
					})
					.catch(err => {
						console.log('err', err);
					});

			},
			back(){
				uni.switchTab({
					url:'/pages/my/my'
				})
			},
			// 抽屉
			switchDiv() {
				document.getElementById('drawer').style.height = '100%';
				document.getElementById('box').style.height = '75vh';
			},
			notswitchDiv() {
				document.getElementById('drawer').style.height = '0px';
				document.getElementById('box').style.height = '0px';
			},
			notswitchimg(res) {
				// var me = this;
				this.notswitchDiv()
				console.log(this.userimg)
				this.userimg = res
				console.log("ss" + this.userimg)
			},

			onUploaded(lists) {
				this.filesArr = lists;
			}



		},

	}
</script>

<style scoped lang="scss">
	.myform {
		width: 100%;
		height: 100%;
	}

	.myform-img {
		width: 200rpx;
		height: 200rpx;
		margin: auto;
		padding-top: 10px;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-drawer {
		height: 0;
		width: 100%;
		position: absolute;
		bottom: 0;
		background: rgba(204, 204, 204, 0.6);
		z-index: 999;
		transition: 0.5s;
		overflow-x: hidden;
	}

	.box {
		height: 100%;
		width: 100%;
		text-align: center;
		white-space: nowrap;
		position: absolute;
		bottom: 0;
		background-color: #f3f3f3;
		transition: 0.7s;
		overflow-x: hidden;

		.box-text {
			width: 130rpx;
			height: 60rpx;
			font-weight: bold;
			line-height: 60rpx;
			margin: 20rpx auto;
			border: 1px solid #6699CC;
			border-radius: 20px;
			color: #99CCFF;
			background-color: #006699;
		}

		.box-imgbox {
			height: 100%;
			width: 100%;
			padding: 50rpx;
			z-index: 1500;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.imgbox-img {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				margin: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.example {
		padding: 5px 60rpx;
		background-color: #fff;

		.mytest {
			height: 100%;
			display: flex;
			align-items: center;
			color: #CCCCCC;
		}
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-pb-5 {
		padding: 10rpx 0 0 20rpx;
	}
</style>
